Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Input Hints
A v-input component takes a hint prop to let us add an input hint.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-input hint="a hint" persistent-hint :messages="messages">Input</v-input>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
messages: [],
}),
};
</script>
We added the persistent-hint prop to make the hint persistent.
Also, we have the hint prop with the hint text.
Success Message
We can add a success message with the success-messages prop:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-input :success-messages="['Success']" success disabled>Input</v-input>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We set an array to the success-messages prop.
Error
We can display errors with the error-messages prop:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-input :error-messages="['an error occurred']" error disabled>Input</v-input>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Multiple Errors
The error-count prop lets us add multiple errors into an input:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-input
error-count="2"
:error-messages="['an error', 'another error']"
error
disabled
>Input</v-input>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We have the error-count prop to set the error count and the error-messages prop to set the error messages array.
Rules
The validation rules for the form can be set with the rules prop:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-text-field :rules="rules"></v-text-field>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
rules: [
(value) => !!value || "Required.",
(value) => (value || "").length <= 10 || "Max 10 characters",
],
}),
};
</script>
The rules property is an array with functions that returns an error message if needed.
value has the value that we entered.
Auto Hiding Details
The hide-details prop lets us hide messages automatically.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-text-field label="Main input" :rules="rules" hide-details="auto"></v-text-field>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
rules: [
(value) => !!value || "Required.",
(value) => (value || "").length <= 10 || "Max 10 characters",
],
}),
};
</script>
We have the rules array with the validation rules.
hide-details set to auto hide the validation errors if there’s none to display.
Conclusion
We can add input hints and validation messages with Vuetify text inputs.
